<template>
        <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="str in listImg">
            	<a :href="str.url">
            		<img :src="str.pic"/>
            	</a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
	import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    import axios from 'axios';
    export default {
//      props: ['listImg'],
        data(){
        	return {
        		listImg:[]
        	}
        },
        updated(){
        	setTimeout(this.start(),1000)
        },
        methods:{
        	_getRec(){
        		axios({
        			methods:'get',
        			url:"/carousel",
        		}).then((res)=>{
        			this.listImg = res.data.data
        		})
        	},
        	start(){
	            	var swiper = new Swiper('.swiper-container', {
	            	autoplay:{
	            		delay:3000,
	            	},
	            	pagination:{
	            		el: '.swiper-pagination',
	            		hideOnClick :true,
	            		bulletElement : 'li',
	            		clickable: true,
	    				clickableClass : 'my-pagination-clickable',
	            	},
	            	loop:true,
	            	observer:true,
	            	observeParents:true,
	            });
	            }
        },
        mounted() {
        	this._getRec();
        }
    }
</script>

<style lang="scss">
	.swiper-container {
        width: 100%;
        height: 94px;
        .swiper-wrapper {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 100%;
            	img {
            	    width: 100%;
            }
        }
        .swiper-pagination-bullet {
            width:8px;
            height: 8px;
            display: inline-block;
            background: #7c5e53;
        }
        .swiper-pagination-bullet-active{
        	background-color: #fff;
        }
    }
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom,.swiper-pagination-fraction{
        	bottom: 0;
        }
</style>